<template>
  <div class="page">
    <div class="header">
      <div class="flex forword-steps">
        <div class="q" :class="{ active: active == 1 }">1</div>
        <div class="l"></div>
        <div class="q" :class="{ active: active == 2 }">2</div>
        <div class="l"></div>
        <div class="q" :class="{ active: active == 3 }">3</div>
      </div>
      <div class="flex forword-text">
        <div class="t" :class="{ active: active == 1 }">安全验证</div>
        <div class="t" :class="{ active: active == 2 }">设置新密码</div>
        <div class="t" :class="{ active: active == 3 }">设置成功</div>
      </div>
    </div>
    <p></p>
    <div class="footer">
      <div v-if="active == 1">
        <p class="font-bold font-16 m-b-20">重置密码</p>
        <div class="inpBox">
          <input
            type="text"
            v-model="form.mobilePhone"
            class="inp"
            placeholder="请输入手机号码"
          />
        </div>
        <div class="inpBox flex">
          <div class="w">
            <input
              type="text"
              v-model="code"
              class="inp"
              placeholder="请输入验证码"
            />
          </div>
          <p class="code" @click="getYzm()">{{ text }}</p>
        </div>
        <div class="loginBtn" @click="loginNext()">下一步</div>
      </div>
      <div v-if="active == 2">
        <p class="font-bold font-16 m-b-20">重置密码</p>
        <div class="inpBox">
          <input
            type="password"
            v-model="newPassword"
            class="inp"
            placeholder="请设置登录密码"
          />
        </div>
        <div class="inpBox">
          <input
            type="password"
            v-model="RecknewPassword"
            class="inp"
            placeholder="请再次输入登录密码"
          />
        </div>
        <div class="loginBtn" @click="loginSuccess()">下一步</div>
      </div>
      <div v-if="active == 3">
        <div class="text-center">
          <img
            src="@/assets/img/login/min-logo.png"
            class="min-logo"
            alt=""
            srcset=""
          />
        </div>
        <p class="text-center font-18 font-bold m-t-20">密码重置成功</p>
        <p class="text-center font-14 m-t-10 col-666">
          请妥善保管好您的账户信息
        </p>
        <div
          class="loginBtn"
          style="width: 50%; margin: 50px auto"
          @click="login()"
        >
          去登陆
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast, Checkbox, CheckboxGroup, Step, Steps } from 'vant'
import { getValue, setValue, setObject, clear } from '@/utils/auth'
import { postHandle, getHandle } from '@/api'
import crypto from 'crypto'
export default {
  components: {
    [Toast.name]: Toast,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Step.name]: Step,
    [Steps.name]: Steps
  },
  data() {
    const loginPageUserName = getValue('loginPageUserName')
    return {
      active: 1,
      form: {
        mobilePhone: ''
      },
      code: '',
      newPassword: '',
      RecknewPassword: '',

      text: '获取验证码',
      num: 59
    }
  },
  created() {},
  mounted() {},
  methods: {
    login() {
      // 去登录
      this.$bridge.call('base.closePage')
    },
    loginSuccess() {
      // 密码重置成功
      if (this.newPassword !== this.RecknewPassword) {
        this.rePasswordError = true
        Toast('两次密码输入的不一致')
        return
      } else {
        this.rePasswordError = false
      }
      const condition = Object.assign({}, this.form)
      var sha1 = crypto.createHash('sha1')
      sha1.update(this.newPassword)
      const psha = sha1.digest('hex')
      condition.newPassword = psha
      postHandle('/venues/api/userManage/changePasswordByPhone', condition)
        .then(() => {
          this.active = this.active + 1
        })
        .catch((err) => {
          console.log(err)
          Toast(err)
        })
    },
    loginNext() {
      // 校验验证码
      const conditionCode = Object.assign({}, this.form)
      conditionCode.scene = 'FORGET_PASSWORD'
      conditionCode.code = this.code
      postHandle('/venues/api/sms/phoneCode/checkPhoneCode', conditionCode)
        .then(() => {
          this.active = this.active + 1
        })
        .catch((err) => {
          Toast(err)
        })
    },

    getYzm() {
      if (this.num != 59) {
        return
      }
      // 获取验证码
      const phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!phoneReg.test(this.form.mobilePhone)) {
        Toast('请输入正确手机号')
        return
      } else {
        this.phoneError = false
      }
      const condition = Object.assign({}, this.form)
      condition.scene = 'FORGET_PASSWORD'
      var sha1 = crypto.createHash('sha1')
      sha1.update(this.form.mobilePhone.split('').reverse().join(''))
      const code_sha = sha1.digest('hex').substring(10, 20)
      condition.sign = code_sha
      postHandle('/venues/api/sms/phoneCode/sendPhoneCode', condition)
        .then(() => {
          Toast('发送成功')

          this.disabled = true
          const int = setInterval(() => {
            this.text = this.num + 's'
            this.num--
            if (this.num === 0) {
              this.disabled = false
              clearInterval(int)
              this.text = '发送验证码'
              this.num = 59
            }
          }, 1000)
        })
        .catch((err) => {
          console.log(err)

          Toast(err)
          return
        })
    }
  }
}
</script>

<style scoped>
.passwordBox {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.page {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
}

.header {
  position: relative;
  overflow: hidden;
  height: 180px;
}
.min-logo {
  width: 68px;
  height: 68px;
}
.header .max-logo {
  width: 100%;
  height: 180px;
}
.logo {
  display: block;
  margin-bottom: 20px;
  width: 64px;
  height: 64px;
}

.footer {
  width: 100%;
  padding: 30px;
  padding-top: 0;
}

.loginTitle {
  text-align: center;
  height: 25px;
  font-size: 18px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 25px;
}
.loginMinTitle {
  height: 19px;
  font-size: 14px;
  font-family: Avenir-Book, Avenir;
  font-weight: normal;
  color: #333333;
  line-height: 19px;
  text-align: center;
  margin-top: 5px;
  margin-bottom: 23px;
}
.inpBox {
  width: 100%;
  height: 50px;
  position: relative;
  margin-bottom: 20px;
}

.inpIcon {
  width: 15px;
  height: 16px;
  position: absolute;
  top: 17px;
  left: 0;
}

.inp {
  width: 100%;
  height: 100%;
  background: #eeeeee;
  font-size: 16px;
  padding-left: 10px;
  color: #333333;
  font-weight: 400;
}

.loginBtn {
  width: 100%;
  height: 45px;
  background-color: #1890ff;
  border-radius: 2px;
  color: #ffffff;
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  margin-top: 50px;
}
.q {
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 18px;
  border: solid 2px #1890ff;
  text-align: center;
}
.l {
  width: calc(50vw - 94px);
  border: solid 1px #1890ff;
  height: 1px;
  margin-top: 17px;
}
.forword-steps {
  padding-left: calc((100vw - 108px) / 6);
  padding-right: calc((100vw - 108px) / 6);
  margin-top: 60px;
}
.forword-text {
  margin-top: 8px;
  text-align: center;
}
.t {
  width: calc(33.3vw);
}
.forword-steps .active {
  background: #1890ff;
  color: #fff;
}
.forword-text .active {
  color: #1890ff;
}
.code {
  color: #1890ff;
  width: 98px;
  line-height: 50px;
  text-align: center;
  background: #eeeeee;
}
.w {
  width: calc(100vw - 160px);
}
.m-t-50 {
  margin-top: 50px;
}
</style>
